{%- liquid
  assign image_blocks = section.blocks | where: 'type', 'image'
  assign is_image_full_page_width = false
-%}

  {%- if section.settings.full_page_width -%}
    {%- assign is_image_full_page_width = true -%}
  {%- endif -%}
  {%- if section.settings.desktop_image != blank or section.settings.mobile_image != blank -%}
    {%- style -%}
      .split-image__image-{{section.id}} .adapt-to-image::before {
        padding-bottom: {{ 1 | divided_by: section.settings.desktop_image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
      }
      @media screen and (max-width: 1023px) {
        .split-image__image-{{section.id}} .adapt-to-image::before {
          padding-bottom: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;
        }
      }
    {%- endstyle -%}
  {%- endif -%}


{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.button_set_style
    when 'solid_with_outline'
      assign first_button_class = 'mx-2 btn-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'
    when 'solid_with_text_link'
      assign first_button_class = 'mx-3 btn-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'outline'
      assign first_button_class = 'mx-2 btn-outline-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'

    when 'outline_with_text_link'
      assign first_button_class = 'mx-3 btn-outline-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'text_link'
      assign first_button_class = 'mx-3 btn-link link-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
  endcase


  assign split_image_item_align = ''

  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-lg-start'
      assign split_image_item_align = 'd-flex justify-content-lg-start'
    when 'center'
      assign text_alignment = 'text-lg-center'
      assign split_image_item_align = 'd-flex justify-content-lg-center'
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
      assign split_image_item_align = split_image_item_align | append: ' justify-content-start'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
      assign split_image_item_align = split_image_item_align | append: ' justify-content-center'
  endcase

  case section.settings.desktop_columns_per_row
    when '1'
      assign desktop_columns_per_row = 'col-lg-12'
      assign desktop_padding_x = ''
    when '2'
      assign desktop_columns_per_row = 'col-lg-6'
      assign  desktop_padding_x = 'gx-lg-7'
    when '3'
      assign desktop_columns_per_row = 'col-lg-4'
      assign  desktop_padding_x = 'gx-lg-6'

  endcase
  case section.settings.mobile_columns_per_row
    when '1'
      assign mobile_columns_per_row = 'col-12'
      assign mobile_padding_x = ''
    when '2'
      assign mobile_columns_per_row = 'col-6'
      assign mobile_padding_x = 'gx-3'
  endcase


  assign enable_image_rounded = true
  assign image_width_along_with_container = false

  assign padding_to_full_section = section.settings.padding_to_full_section
  assign container_style = text_color | append: ' ' | append: text_alignment
  assign content_style = ''


  if background_color != 'bg-white' and padding_to_full_section
    if section.settings.show_bottom_padding == true
      assign container_style = container_style | append: ' py-section ' | append: background_color
    else
      assign container_style = container_style | append: ' pt-section ' | append: background_color
    endif
  else
    if section.settings.show_bottom_padding == true
      assign container_style = container_style | append: ' my-section '
    else
      assign container_style = container_style | append: ' mt-section '
    endif
    assign content_style = content_style | append: background_color

    unless is_image_full_page_width
      assign container_style = container_style | append: ' container '
      assign image_width_along_with_container = true
    endunless
  endif

  if background_color != 'bg-white' and is_image_full_page_width != true
    assign content_style = content_style | append: ' rounded-3 overflow-hidden '
    if padding_to_full_section != true
      assign enable_image_rounded = false
    endif
  endif

  if padding_to_full_section != true and  background_color != 'bg-white'
    assign first_padding_top = 'pt-6 pt-lg-7'
    if section.settings.desktop_image == blank and section.settings.mobile_image == blank
      assign last_padding_bottom = 'pb-6 pb-lg-7'
    endif
  endif

  if padding_to_full_section == true and  background_color != 'bg-white' and section.settings.show_bottom_padding != true
    if section.settings.desktop_image == blank and section.settings.mobile_image == blank
      assign last_padding_bottom = 'pb-6 pb-lg-7'
    endif
  endif

  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = 'lead'
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase

-%}
{%- liquid
  assign has_section_text_content = true
  if section.settings.heading == blank and section.settings.text == blank and section.settings.overline == blank and section.settings.button_label_1 == blank and section.settings.button_label_2 == blank
    assign has_section_text_content = false
  endif
-%}

<div class="split-image__container {{ container_style }}">
  <div class="{{ content_style }}">
    {%- liquid
      assign split_item_style = ''
      assign split_item_style = split_item_style | append: split_image_item_align
      if background_color != 'bg-white' or background_color == 'bg-white' and is_image_full_page_width
        assign split_item_style = split_item_style | append: ' container px-5 '
      endif
      -%}
      <div class="{{ first_padding_top }} {{ last_padding_bottom }}">
        {%- if has_section_text_content -%}
          <div>
            {%- if section.settings.overline != empty -%}
              <div class="{{ split_item_style }}">
                <div class="{{ section.settings.text_width }}">
                  <p class="mb-0">{{ section.settings.overline }}</span></p>
                </div>
              </div>
            {%- endif -%}

            {%- if section.settings.heading != empty -%}
              <div class="{{ split_item_style }} mt-2">
                <div class="{{ section.settings.text_width }}">
                  <{{ mark }} class="{{ section.settings.fontsize }} fw-bold mb-0">{{ section.settings.heading }}</{{ mark }}>
                </div>
              </div>
            {%- endif -%}

            {%- if section.settings.text != empty -%}
              <div class="{{ split_item_style }} mt-2">
                <div class="{{ section.settings.text_width }}">
                  <div class="{{ bodysize }} fw-normal no-last-margin richtext-with-link {{ richtext_link_style }}">
                    {{ section.settings.text }}
                  </div>
                </div>
              </div>
            {%- endif -%}

            {%- if section.settings.button_label_1 != blank or section.settings.button_label_2 != blank -%}
              <div class="{{ split_item_style }} mt-4">
                <div class="overflow-hidden">
                  <div class="mt-n2 {{ parent_class }}">
                      {%- if section.settings.button_label_1 != blank -%}
                        {%- if section.settings.button_link_1 != blank -%}
                          <a {% render 'link', link: section.settings.button_link_1 %} href="{{ section.settings.button_link_1 }}" class="btn {{ first_button_class }}{{ btn_style }}  with-stretched-link mt-2">
                            {{ section.settings.button_label_1 }}
                          </a>
                        {%- else -%}
                          <div class="btn {{ first_button_class }}{{ btn_style }}  with-stretched-link mt-2 disabled cursor-default">
                            {{ section.settings.button_label_1 }}
                          </div>
                        {%- endif -%}
                      {%- endif -%}
                      {%- if section.settings.button_label_2 != blank -%}
                        {%- if section.settings.button_link_2 != blank -%}
                          <a {% render 'link', link: section.settings.button_link_2 %} href="{{ section.settings.button_link_2 }}" class="btn {{ second_button_class }}{{ btn_style }}  with-stretched-link mt-2">
                            {{ section.settings.button_label_2 }}
                          </a>
                          {%- else -%}
                          <div class="btn {{ second_button_class }}{{ btn_style }}  with-stretched-link mt-2 disabled cursor-default">
                            {{ section.settings.button_label_2 }}
                          </div>
                        {%- endif -%}
                      {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}
        {%- liquid
          for block in section.blocks
            if forloop.length > 0
              assign flag = true
            else
              assign flag = false
            endif
          endfor
        %}
        {% if flag %}
          <div {% if background_color != 'bg-white' or background_color == 'bg-white' and is_image_full_page_width %}class="container px-5"{% endif %}>
            <div class="row mb-n5 {% if has_section_text_content %}mt-5 mt-lg-6{% endif %} {{ split_image_item_align }} {{ mobile_padding_x }} {{ desktop_padding_x }}">
              {%- for block in section.blocks -%}
                <div class="mb-5 {{ desktop_columns_per_row }} {{ mobile_columns_per_row }}">
                  <div class="d-flex {{ split_image_item_align }}">
                    <div class="{{ block.settings.text_width }}">
                      {% if block.settings.title != blank %}
                        <h5 class="display-1 fw-normal mb-0 align-self-center">{{ block.settings.title }}</h5>
                      {% endif %}
                      {% if block.settings.text != blank %}
                        <div class="lead no-last-margin">{{ block.settings.text }}</div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>

      {%- liquid
        case section.settings.image_height
          when 'small'
            assign image_height = 'h-4 h-lg-5'
          when 'medium'
            assign image_height = 'h-5 h-lg-7'
          when 'large'
            assign image_height = 'h-7 h-lg-9'
          when 'adapt_to_image'
            assign image_height = 'adapt-to-image'
          else
            assign image_height = ''
        endcase

        assign image_container_style = ''
        unless image_width_along_with_container
          if section.settings.full_page_width
            assign image_container_style = 'container-topic px-0'
            assign enable_image_rounded = false
          else
            assign image_container_style = 'container'
          endif
        endunless
      %}
      {% if section.settings.desktop_image != blank or section.settings.mobile_image != blank %}
        <div class="mt-5 mt-lg-7 split-image__image-{{section.id}}">
          <div class="{{ image_container_style }}">
            <div class="{{ image_height }} img-wrapper rigid-wrapper">
              <picture>
                {% if section.settings.mobile_image != blank %}
                  <source media="(max-width: 1023px)" sizes="(max-width: 1023px) 100vw, 1023px"
                    srcset="{%- if section.settings.mobile_image.width >= 414 -%}{{ section.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 600 -%}{{ section.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 828 -%}{{ section.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 1000 -%}{{ section.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 1200 -%}{{ section.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 2400 -%}{{ section.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}">
                {% endif %}
                {% if section.settings.desktop_image != blank %}
                  <img class="object-fit-cover d-none d-lg-block {% if enable_image_rounded %} rounded-3{% endif %}"
                    srcset="{%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                      {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                      {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                      {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                    src="{{ section.settings.desktop_image | img_url: '750x' }}"
                    loading="lazy"
                    alt="{{ section.settings.desktop_image.alt | escape }}"
                    width="{{ section.settings.desktop_image.width }}"
                    height="{{ section.settings.desktop_image.height }}">
                  {% endif %}
                  {% if section.settings.mobile_image != blank and section.settings.desktop_image == blank %}
                  <img class="object-fit-cover d-lg-none{% if enable_image_rounded %} rounded-3{% endif %}"
                  srcset="{%- if section.settings.mobile_image.width >= 414 -%}{{ section.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 600 -%}{{ section.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 828 -%}{{ section.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 1000 -%}{{ section.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 1200 -%}{{ section.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 2400 -%}{{ section.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
                    {%- if section.settings.mobile_image.width >= 3840 -%}{{ section.settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                    src="{{ section.settings.mobile_image | img_url: '750x' }}"
                    loading="lazy"
                    alt="{{ section.settings.mobile_image.alt | escape }}"
                    width="{{ section.settings.mobile_image.width }}"
                    height="{{ section.settings.mobile_image.height }}">
                {% endif %}
                {% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
                  <img class="object-fit-cover{% if enable_image_rounded %} rounded-3{% endif %}"
                  srcset="{%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                    {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                    {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                    {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                  src="{{ section.settings.desktop_image | img_url: '750x' }}"
                  loading="lazy"
                  alt="{{ section.settings.desktop_image.alt | escape }}"
                  width="{{ section.settings.desktop_image.width }}"
                  height="{{ section.settings.desktop_image.height }}">
                {% endif %}
              </picture>
            </div>
          </div>
        </div>
      {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Number Items",
    "class": "number-items",
    "tag": "section",
    "settings": [
      {
        "type": "image_picker",
        "id": "desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "checkbox",
        "id": "full_page_width",
        "label": "Full page width",
        "default": false
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Add background color to the full section",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_bottom_padding",
        "label": "Show bottom padding",
        "default": true
      },
      {
        "type": "header",
        "content": "Numbers"
      },
      {
        "type": "radio",
        "id": "desktop_columns_per_row",
        "label": "Desktop columns per row",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          }
        ],
        "default": "2"
      },
      {
        "type": "radio",
        "id": "mobile_columns_per_row",
        "label": "Mobile columns per row",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          }
        ],
        "default": "2"
      },
      {
        "type": "header",
        "content": "Text"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-lg-8",
            "label": "2/3"
          },
          {
            "value": "col-lg-6",
            "label": "1/2"
          },
          {
            "value": "col-lg-4",
            "label": "1/3"
          }
        ],
        "default": "col-lg-6"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "text",
        "id": "overline",
        "default": "Overline",
        "label": "Overline"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Talk about your brand",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>",
        "label": "Text"
      },
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "text",
        "id": "button_label_1",
        "default": "Button label",
        "label": "Primary button label"
      },
      {
        "type": "url",
        "id": "button_link_1",
        "label": "Primary button link"
      },
      {
        "type": "text",
        "id": "button_label_2",
        "default": "Button label",
        "label": "Secondary button label"
      },
      {
        "type": "url",
        "id": "button_link_2",
        "label": "Secondary button link"
      },
      {
        "type": "select",
        "id": "button_set_style",
        "label": "Button set style",
        "options": [
          {
            "value": "solid_with_outline",
            "label": "Solid button with Outlined button"
          },
          {
            "value": "solid_with_text_link",
            "label": "Solid button with Text link"
          },
          {
            "value": "outline",
            "label": "Outlined button"
          },
          {
            "value": "outline_with_text_link",
            "label": "Outlined button with Text link"
          }, {
            "value": "text_link",
            "label": "Text link"
          }
        ],
        "default": "solid_with_outline"
      }
    ],
    "blocks": [
      {
        "type": "numbers",
        "name": "Numbers",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Numbers"
          },
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Text</p>",
            "label": "Text"
          },
          {
            "type": "select",
            "id": "text_width",
            "label": "Desktop text width",
            "options": [
              {
                "value": "col-lg-12",
                "label": "Full width"
              },
              {
                "value": "col-lg-8",
                "label": "2/3"
              },
              {
                "value": "col-lg-6",
                "label": "1/2"
              }
            ],
            "default": "col-lg-12"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Number Items",
        "blocks": [
          {
            "type": "numbers"
          },
          {
            "type": "numbers"
          }
        ]
      }
    ]
  }
{% endschema %}
